<template>
  <div class="lix-container" style="background: #f7f7f7;">
    <div class="lix-odd__tips">
      <PayStatus />
    </div>
    <div class="lix-odd__container">
      <div class="lix-odd__wrapper">
        <AddressStatus />
      </div>
      <div class="lix-odd__wrapper">
        <ProductInfo type="detail"/>
      </div>
      <div class="lix-odd__wrapper">
        <GiftInfo />
      </div>
      <div class="lix-odd__wrapper">
        <PayInfo />
      </div>
      <div class="lix-odd__wrapper">
        <OtherInfo />
      </div>
      <div class="lix-odd__wrapper">
        <ProductInfo type="return"/>
      </div>
      <div class="lix-odd__sum-wrapper">
        <van-goods-action>
          <div class="lix-odd__price">￥173800.99</div>
          <van-goods-action-big-btn text="取消" @click="onClickMoveToCollect" />
          <van-goods-action-big-btn text="马上支付" @click="onDelete" primary />
        </van-goods-action>
      </div>
    </div>
  </div>
</template>

<script>
import ProductInfo from '../../components/product-info'
import PayStatus from '../../components/order/pay-status'
import AddressStatus from '../../components/order/address-info'
import GiftInfo from '../../components/order/gift-info'
import PayInfo from '../../components/order/pay-info'
import OtherInfo from '../../components/order/other-info'
import { GoodsAction, GoodsActionBigBtn, GoodsActionMiniBtn } from 'vant'
import Vue from 'vue'
Vue
  .use(GoodsAction)
  .use(GoodsActionBigBtn)
  .use(GoodsActionMiniBtn)

export default {
  components: {
    ProductInfo,
    PayStatus,
    AddressStatus,
    GiftInfo,
    PayInfo,
    OtherInfo
  }
}
</script>

<style lang="scss">
@import "../../theme-chalk/orderdetail.scss";
</style>
